<template>
  <PageWrapper dense contentClass="p-16px">
    <Card>
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <div class="h-64px flex flex-col justify-between ml-16px">
            <div class="flex items-center">
              <h3 class="mr-6px mb-0">销售订单:{{ state.saleOrderInfo.id }}</h3>
            </div>
            <div>
              <Tag :closable="false" color="blue">待审核</Tag>
            </div>
          </div>
        </div>
        <Space>
          <Button @click="handleCancel">返回</Button>
          <Button @click="handleEdit">编辑</Button>
          <Dropdown>
            <template #overlay>
              <Menu @click="handleMenuClick">
                <MenuItem key="1">支付预览</MenuItem>
              </Menu>
            </template>
            <Button @click.prevent type="primary">导出单证
              <DownOutlined />
            </Button>
          </Dropdown>
          <Dropdown>
            <template #overlay>
              <Menu @click="handleMenuClick">
                <!-- <MenuItem key="3">移交</MenuItem> -->
                <MenuItem key="4">删除</MenuItem>
              </Menu>
            </template>
            <Button @click.prevent>
              <SmallDashOutlined />
            </Button>
          </Dropdown>
        </Space>
      </div>
      <Divider />
      <Description :column="3" :bordered="false" :data="state.saleOrderInfo" :schema="schema" />
      <Tabs v-model:activeKey="state.activeKey">
        <TabPane key="1" tab="订单详情">
          <Row>
            <Col :span="16">
            <BaseInfo :saleOrderInfo="state.saleOrderInfo" />
            </Col>
            <Col :span="1" style="text-align: center">
            <Divider type="vertical" style="height: 100%" />
            </Col>
            <Col :span="7">
            <Abstract :saleOrderInfo="state.saleOrderInfo" />
            </Col>
          </Row>
          <CollapseContainer title="备注" class="mt-8px">
            <Remark :saleOrderInfo="state.saleOrderInfo" />
          </CollapseContainer>
        </TabPane>

        <TabPane key="2" tab="回款">
          <RelevantInformation />
        </TabPane>
        <TabPane key="3" tab="费用">
          <RelevantInformation />
        </TabPane>
        <TabPane key="4" tab="物流" forceRender>
          <Logistics />
        </TabPane>
        <TabPane key="5" tab="相关单证">
          <Document />
        </TabPane>
        <TabPane key="6" tab="附件">
          <FileList />
        </TabPane>
        <TabPane key="7" tab="操作记录">
          <Log title="销售订单" />
        </TabPane>
      </Tabs>
    </Card>
  </PageWrapper>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive, createVNode } from 'vue';
import { getSaleOrder, delSaleOrder } from '@/api/sale/order';
import {
  Tag,
  Card,
  Space,
  Button,
  Dropdown,
  Menu,
  Divider,
  Tabs,
  Row,
  Col,
  Modal,
} from 'ant-design-vue';
import { Description, DescItem } from '@/components/Description/index';
import { useTabs } from '@/hooks/web/useTabs';
import { useGo } from '@/hooks/web/usePage';
import { PageEnum } from '@/enums/pageEnum';
import { CollapseContainer } from '@/components/Container';
import { PageWrapper } from '@/components/Page';
import { FileList } from '@/components/FileList';
import { Log } from '@/components/Log';
import BaseInfo from './components/baseInfo.vue';
import Abstract from './components/abstract.vue';
import Remark from './components/remark.vue';
import RelevantInformation from './components/relevantInformation.vue';
import Logistics from './components/logistics.vue';
import Document from './components/document.vue';
import type { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
import {
  SmallDashOutlined,
  DownOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons-vue';
import { useRoute } from 'vue-router';
/** 拿到路由的id */
const route = useRoute();
const id = route.query.id as string;
defineOptions({ name: 'saleOrderDetail' });
const MenuItem = Menu.Item;
const TabPane = Tabs.TabPane;
const emit = defineEmits(['register', 'reload']);
const { closeCurrent } = useTabs();
const state = reactive({
  customerLabel: [],
  activeKey: '1',
  saleOrderInfo: {},
  contactVoMain: {},
});
const schema: DescItem[] = [
  {
    field: 'customerId',
    label: '客户',
  },
  {
    field: 'customerConcatId',
    label: '联系人',
  },
  {
    field: 'orderTime',
    label: '下单日期',
  },
  {
    field: 'deliveryTime',
    label: '交货日期',
  },
  {
    field: 'shippingId',
    label: '运输方式',
  },
  {
    field: 'tradeTermId',
    label: '贸易术语',
  }
];
const handleMenuClick = (e: MenuInfo) => {
  switch (e.key) {
    case '4':
      handleDelete();
      break;

    default:
      break;
  }
};
const handleDelete = () => {
  Modal.confirm({
    title: '删除',
    icon: createVNode(ExclamationCircleOutlined),
    content: '你确定要删除当前订单吗？',
    okText: '确认',
    cancelText: '取消',
    onOk: async () => {
      await delSaleOrder(state.saleOrderInfo.id);
      handleCancel();
    },
  });
};
const go = useGo();
function handleEdit() {
  closeCurrent();
  go({
    path: '/sale/saleOrderEdit' as PageEnum,
    query: { id: id, type: 'update' },
  });
}
function handleCancel() {
  closeCurrent();
  go({ path: '/sale/order' as PageEnum });
}
const getUserInfo = async () => {
  const res = (await getSaleOrder(id)) as any;
  state.saleOrderInfo = res;
};
onMounted(() => {
  getUserInfo();
});
</script>

<style lang="less" scoped>
:deep(.ant-tag) {
  margin-right: 6px;
}

:deep(.ant-card-body) {
  padding: 16px;
}
</style>
